h3 Full Calendar
  small Drag and Drop events and tasks

// START row
.calendar-app(ng-controller="CalendarController")
  .row
    .col-lg-3.col-md-4
      .row
        .col-md-12.col-sm-6.col-xs-12.co-xs-pull-12
          // START panel
          .panel.panel-default
            .panel-heading
              h4.panel-title Draggable Events
            // Default external events list
            .external-events-trash
              .panel-body
                .external-events
                  .bg-green Lunch
                  .bg-danger Go home
                  .bg-info Do homework
                  .bg-warning Work on UI design
                  .bg-inverse Sleep tight
                p
                  span.checkbox.c-checkbox
                    label
                      input#remove-after-drop(type='checkbox')
                      span.fa.fa-check 
                      | Remove after Drop
          // END panel
        .col-md-12.col-sm-6.col-xs-12.co-xs-push-12
          // START panel
          .panel.panel-default
            .panel-heading
              h3.panel-title Create Event
            .panel-body
              .input-group.mb
                input.form-control.external-event-name(type='text', placeholder="Event name...")
                .input-group-btn
                  button.btn.btn-default.external-event-add-btn(type='button') Add
              p.text-muted: small Choose a Color
              ul.list-inline.external-event-color-selector
                li.p0: a.circle.circle-danger.circle-xl.selected(href='#')
                li.p0: a.circle.circle-primary.circle-xl(href='#')
                li.p0: a.circle.circle-info.circle-xl(href='#')
                li.p0: a.circle.circle-success.circle-xl(href='#')
                li.p0: a.circle.circle-warning.circle-xl(href='#')
                li.p0: a.circle.circle-green.circle-xl(href='#')
                li.p0: a.circle.circle-pink.circle-xl(href='#')
                li.p0: a.circle.circle-inverse.circle-xl(href='#')
                li.p0: a.circle.circle-purple.circle-xl(href='#')
          // END panel
    .col-lg-9.col-md-8
      // START panel
      .panel.panel-default
        .panel-body
          // START calendar
          #calendar
          // END calendar
      // END panel
  // END row
